<template>
    <div class="min-h-screen bg-gradient-to-br from-pink-100 to-blue-100 relative">
        <navbar></navbar>
        <main class="container mx-auto px-4 py-8 max-w-6xl">
            <!-- 标题 -->
            <h1 class="text-4xl text-center mb-8 font-comic text-pink-500 drop-shadow-md">
                目标是:交一百个朋友
            </h1>

            <!-- 友情链接展示 -->
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-12">
                <div v-for="(link, index) in passWebList" :key="index" @click="go(link.url)"
                    class="bg-white rounded-xl p-6 shadow-lg hover:shadow-xl transition-shadow duration-300 relative">
                    <div class="flex items-center mb-4">
                        <img :src="link.webAvatar" class="w-12 h-12 rounded-full border-2 border-pink-200 mr-3">
                        <div>
                            <h3 class="text-lg font-bold text-pink-600">{{ link.webName }}</h3>
                            <a :href="link.url" target="_blank" class="text-blue-500 hover:underline text-sm">
                                {{ link.url }}
                            </a>
                        </div>
                    </div>
                    <p class="text-gray-600 text-sm mb-4">{{ link.description }}</p>
                </div>
            </div>

            <!-- 申请表单 -->
            <div class="bg-white rounded-2xl p-8 shadow-xl">
                <h2 class="text-2xl text-center mb-6 font-comic text-purple-600">
                    ✨ 朋友单 ✨
                </h2>

                <n-form ref="formRef" :model="form" :rules="rules" @submit.prevent="submitApplication"
                    class="max-w-2xl mx-auto">
                    <n-form-item label="网站名称" path="webName">
                        <n-input v-model:value="form.webName" placeholder="请输入你的网站名称" class="!rounded-lg" />
                    </n-form-item>

                    <n-form-item label="网站地址" path="url">
                        <n-input v-model:value="form.url" placeholder="请输入网址" class="!rounded-lg" />
                    </n-form-item>

                    <n-form-item label="网站简介" path="description">
                        <n-input v-model:value="form.description" type="textarea" placeholder="用一句话描述你的小窝吧~"
                            :autosize="{ minRows: 3 }" class="!rounded-lg" />
                    </n-form-item>

                    <n-form-item label="网站图标" path="icon">
                        <n-upload ref="up" list-type="image-card" :percentage="false" :custom-request="upload"
                            max="1" />
                    </n-form-item>

                    <n-form-item label="联系方式" path="contact">
                        <n-input v-model:value="form.contact" placeholder="QQ/邮箱" class="!rounded-lg" />
                    </n-form-item>


                    <div class="text-center">
                        <n-button type="primary" attr-type="submit"
                            class="w-full max-w-xs mx-auto bg-primary hover:bg-pink-600 !text-white !rounded-full text-lg">
                            ✦ 发送申请 ✦
                        </n-button>
                    </div>
                </n-form>
            </div>
        </main>

        <!-- 装饰性云朵 -->
        <div class="absolute bottom-0 left-0 right-0 h-12 bg-cloud-pattern opacity-20"></div>
    </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue'
import { NForm, NFormItem, NInput, NButton, useMessage } from 'naive-ui'
import { requestMethod } from '@/hooks/upLoad'
import type { FormInst } from 'naive-ui'
import { subWebInfo,getWebList } from '@/api/friendShip/index'
import { AsyncTaskHandler } from '@/utils/asyncTaskHandler'
import { Reset } from '@/utils/reset'
onMounted(() => { 
    getPassList()
})
// 添加对话框
const up = ref(null)
const passWebList = ref()
const formRef = ref<FormInst | null>(null)
const message  = useMessage()
// 友情链接数据
const friendLinks = ref()
// 表单数据和验证规则
let form = reactive({
    webName: '',
    url: '',
    description: '',
    contact: '',
    webAvatar:''
})
// 获取数据
const getPassList =async () => {
    let res = await AsyncTaskHandler.handleSingleTask(getWebList())
    passWebList.value = res.data
}
// 跳转
const go = (url:string) => {
    window.open(url)
}
// 上传
const upload = async (e: any) => {
    let res = await requestMethod(e)
    if (res.status == 'success') {
        form.webAvatar = res.data.url
        message.success("上传成功")
    } else { 
        message.error("上传失败")
    }
}

const validatorContent = (rules:any,values:any,callBack:any) => { 
    const qqRegex = /^[1-9]\d{4,10}$/;
    const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
    if (!(qqRegex.test(values) || emailRegex.test(values))) { 
        callBack(Error("请输入正确的格式"))
    }
    callBack()
}

const rules:any = {
    webName: { required: true, message: '请输入网站名称', trigger: ['blur'] },
    url: {
        required: true,
        type: 'url',
        message: '请输入合法的网址',
        trigger: ['blur']
    },
    contact: {
        required: true, validator:validatorContent, message: '请输入联系方式', trigger: ['blur']
    }
}

// 提交申请
const submitApplication = () => {
    // 这里添加实际提交逻辑
    formRef.value?.validate(async (errors) => {
        if (!errors) {
            let res = await AsyncTaskHandler.handleSingleTask(subWebInfo(form))
            if (res.code == 0) {
                message.success("网站信息上传成功")
                Reset.resetObj(form)
                //@ts-ignore
                up.value?.clear()
            }
        }
        else {
            
            message.error('验证失败')
        }
    })
   
}
</script>

<style scoped lang="scss">
/* 自定义字体 */
.font-comic {
    font-family: 'Comic Sans MS', cursive;
}

/* 云朵装饰图案 */
.bg-cloud-pattern {
    background-image: url("data:image/svg+xml,%3Csvg width='40' height='24' viewBox='0 0 40 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 0c-5.523 0-10 4.477-10 10 0 1.046.16 2.054.458 3H0v4h40v-4H29.542c.298-.946.458-1.954.458-3 0-5.523-4.477-10-10-10z' fill='%2390cdf4'/%3E%3C/svg%3E");
}
</style>